<template>
  <div class="PersonJob">
    <!-- 搜索框 -->
    <div class="PersonJob_serach">
      <el-form :inline="true" class="demo-form-inline">
        <el-form-item label="姓名 :">
          <el-input
            v-model="adminQuery.name"
            placeholder="请输入姓名"
            clearable
            filterable
            @change="getserach"
          ></el-input>
        </el-form-item>
        <el-form-item label="手机号">
          <el-input
            v-model="adminQuery.phone"
            placeholder="请输入电话号码"
            filterable
            clearable
            @change="getserach"
          ></el-input>
        </el-form-item>
        <el-form-item label="在职/离职">
          <el-select
            v-model="adminQuery.isOnjob"
            placeholder="请选择在职/离职"
            filterable
            clearable
            @change="getserach"
          >
            <el-option
              v-for="item in jonList"
              :label="item.name"
              :value="item.id"
              :key="item.id"
            ></el-option>
          </el-select>
        </el-form-item>
        <el-form-item>
          <el-button type="primary" @click="getserach">确认搜索</el-button>
        </el-form-item>
        <el-form-item>
          <!-- 添加工作员工 -->
          <div class="PersonJob_top">
            <el-button
              icon="el-icon-circle-plus-outline"
              type="success"
              @click="handlerAdd"
              >添加工作员工</el-button
            >
          </div>
        </el-form-item>
      </el-form>
    </div>
    <!-- 表格 -->
    <el-table
      :data="adminlist"
      border
      style="width: 100%; margin-top: 20px"
      :header-cell-style="{
        width: '100%',
        background: '#FAFAFA',
        color: '#606266',
        height: '60px'
      }"
    >
      <el-table-column prop="no" label="序号"></el-table-column>

      <el-table-column prop="petName" label="姓名">
        <template slot-scope="scoped">
          <div>
            <span v-if="scoped.row.petName == null" style="color: red"
              >暂无数据</span
            >
            <span v-else>{{ scoped.row.petName }}</span>
          </div>
        </template>
      </el-table-column>
      <el-table-column prop="phone" label="手机号">
        <template slot-scope="scoped">
          <div>
            <span v-if="scoped.row.phone == null" style="color: red"
              >暂无数据</span
            >
            <span v-else>{{ scoped.row.phone }}</span>
          </div>
        </template>
      </el-table-column>
      <el-table-column prop="name" label="所属角色">
        <template slot-scope="scoped">
          <div>
            <span v-if="scoped.row.name == null" style="color: red"
              >暂无数据</span
            >
            <span v-else>{{ scoped.row.name }}</span>
          </div>
        </template>
      </el-table-column>
      <el-table-column prop="dateOfEntry" label="入职时间">
        <template slot-scope="scoped">
          <div>
            <span v-if="scoped.row.dateOfEntry == null" style="color: red"
              >暂无数据</span
            >
            <span v-else>{{ scoped.row.dateOfEntry }}</span>
          </div>
        </template>
      </el-table-column>
      <el-table-column prop="isOnjob" label="开启在职/离职">
        <template slot-scope="scoped">
          <div>
            <el-switch
              v-model="scoped.row.isOnjob"
              active-color="#13ce66"
              inactive-color="#ff4949"
              @change="changeStatus(scoped.row)"
            ></el-switch>
          </div>
        </template>
      </el-table-column>
      <el-table-column label="操作">
        <template slot-scope="scoped">
          <div>
            <el-tag
              type="success"
              class="tablebtn"
              @click="handlerEdit(scoped.row)"
              >编辑</el-tag
            >
            <el-tag
              type="warning"
              class="tablebtn"
              @click="handlerShow(scoped.row)"
              >查看</el-tag
            >
            <el-tag
              type="danger"
              class="tablebtn"
              @click="handlerDel(scoped.row)"
              >删除</el-tag
            >
          </div>
        </template>
      </el-table-column>
    </el-table>
    <!-- 分页 -->
    <div class="pagination">
      <el-pagination
        background
        @size-change="handleSizeChange"
        @current-change="handleCurrentChange"
        :page-sizes="[10, 20, 30, 40, 50]"
        :page-size="adminQuery.pageSize"
        :current-page="adminQuery.pageNumber"
        layout="total, sizes, prev, pager, next, jumper"
        :total="count"
        class="management_page"
      ></el-pagination>
    </div>
    <!-- 添加员工 -->
    <el-dialog
      :title="personName"
      :visible.sync="PersonJobdialogVisible"
      width="30%"
      @close="reset"
    >
      <el-form
        :model="PersonForm"
        :rules="PersonRules"
        ref="personRef"
        label-width="150px"
        class="demo-ruleForm"
      >
        <el-form-item label="所属用户:" prop="userId" v-if="showMessage">
          <el-select
            v-model="PersonForm.userId"
            clearable
            placeholder="请选择用户"
            @change="handlerGet"
          >
            <el-option
              v-for="item in FreeAdminList"
              :label="item.realName"
              :value="item.userId"
              :key="item.userId"
            ></el-option>
          </el-select>
        </el-form-item>
        <el-form-item label="姓名(必填) :" prop="petName">
          <el-input
            v-model="PersonForm.petName"
            :disabled="personDisabled"
            placeholder="请输入姓名"
          ></el-input>
        </el-form-item>
        <el-form-item label="手机号码(必填) :" prop="phone">
          <el-input
            v-model="PersonForm.phone"
            :disabled="personDisabled"
            placeholder="请输入手机号"
          ></el-input>
        </el-form-item>
        <el-form-item label="入职日期(必填) :" prop="dateOfEntry">
          <el-date-picker
            v-model="PersonForm.dateOfEntry"
            type="date"
            placeholder="选择入职日期"
            :disabled="personDisabled"
            value-format="yyyy-MM-dd"
          ></el-date-picker>
        </el-form-item>
        <el-form-item label="员工状态 :" prop="isOnjob">
          <el-select
            v-model="PersonForm.isOnjob"
            placeholder="请选择员工状态"
            :disabled="personDisabled"
            clearable
            filterable
          >
            <el-option
              v-for="item in jonList"
              :label="item.name"
              :value="item.id"
              :key="item.id"
            ></el-option>
          </el-select>
        </el-form-item>
        <el-form-item label="所属角色(必填) :" prop="roleId">
          <el-select
            v-model="PersonForm.roleId"
            placeholder="请选择所属角色"
            :disabled="personDisabled"
            clearable
            filterable
          >
            <el-option
              v-for="item in roleList"
              :label="item.name"
              :value="item.id"
              :key="item.id"
            ></el-option>
          </el-select>
        </el-form-item>
      </el-form>
      <span slot="footer" class="dialog-footer">
        <el-button @click="reset">重置</el-button>
        <el-button type="primary" @click="sureAdd">确定</el-button>
      </span>
    </el-dialog>
  </div>
</template>
<script>
import {
  adminList,
  changestatus,
  roleSelNoPage,
  adminAdd,
  adminUpdate,
  adminDel,
  companySel,
  getFreeAdmin
} from "../../utils/api";
import { mapState, mapGetters } from "vuex";
export default {
  data() {
    return {
      value: "",
      //   员工弹框的显示隐藏
      PersonJobdialogVisible: false,
      //   添加员工的弹框
      PersonForm: {
        userId: "",
        petName: "",
        phone: "",
        roleId: "",
        isOnjob: "",
        dateOfEntry: "",
        name: "",
        id: "",
        user_id: "",
        companyId: ""
      },
      //   员工弹框的校验
      PersonRules: {
        petName: [{ required: true, message: "请输入姓名", trigger: "change" }],
        phone: [{ required: true, message: "请输入手机号", trigger: "change" }],
        dateOfEntry: [
          { required: true, message: "请选择日期", trigger: "change" }
        ],
        isOnjob: [
          { required: true, message: "请选择员工的状态", trigger: "change" }
        ],
        phone: [
          { required: true, message: "请输入手机号", trigger: "change" },
          {
            pattern: /^1[3-9]\d{9}$/,
            message: "手机号格式错误"
          }
        ],
        roleId: [
          { required: true, message: "请选择所属角色", trigger: "change" }
        ],
        userId: [
          { required: true, message: "请选择所属用户", trigger: "change" }
        ]
      },
      //   员工列表的数据
      adminlist: [],
      //   三个弹框不同的名字
      personName: "添加员工",
      personDisabled: false,
      // 员工列表的分页
      adminQuery: {
        pageNumber: 1,
        pageSize: 10,
        companyId: "",
        name: "",
        phone: "",
        isOnjob: ""
      },
      // 总条数
      count: 0,
      // 在职离职
      jonList: [
        {
          id: 1,
          name: "在职"
        },
        {
          id: 2,
          name: "离职"
        }
      ],
      // 角色列表
      roleList: [],
      // 公司的列表
      companySelList: [],
      FreeAdminList: [],
      showMessage: true
    };
  },
  created() {
    // this.PersonForm.userId = window.sessionStorage.getItem("userId");
    this.getDataInit();
    this.handlergetFreeAdmin();
  },
  computed: {
    ...mapState(["org_id"])
  },
  watch: {
    org_id(val) {
      this.adminQuery.pageNumber = 1;
      this.getadminList();
    }
  },
  methods: {
    getDataInit() {
      if (this.org_id === "" || this.org_id === null || !this.org_id) {
      } else {
        this.getadminList();
      }
    },
    // 获取工作人员的空闲数据
    handlergetFreeAdmin() {
      this.postRequest(getFreeAdmin).then(res => {
        if (res.code == 200) {
          this.FreeAdminList = res.data;
        }
      });
    },
    handlerGet(val) {
      this.FreeAdminList.map(item => {
        if (item.userId == val) {
          this.PersonForm.petName = item.realName;
          this.PersonForm.phone = item.phone;
        }
      });
    },
    // 获取角色列表
    getroleSel() {
      const params = {
        pageNumber: 1,
        pageSize: 10,
        PermissionType: 1,
        companyId: this.org_id
      };
      this.postRequest(roleSelNoPage, params).then(res => {
        if (res.code == 200) {
          this.roleList = res.data;
        }
      });
    },
    // 获取工作人员列表
    getadminList() {
      this.adminQuery.companyId = this.org_id;
      this.postRequest(adminList, this.adminQuery).then(res => {
        if (res.code == 200) {
          this.adminlist = res.data.data;
          this.count = res.data.count;
          res.data.data.map(item => {
            if (item.isOnjob == 1) {
              item.isOnjob = true;
            } else if (item.isOnjob == 2) {
              item.isOnjob = false;
            }
          });
        }
      });
    },
    // 修改员工状态
    changeStatus(data) {
      if (data.isOnjob == false) {
        data.isOnjob = 2;
      } else if (data.isOnjob == true) {
        data.isOnjob = 1;
      }
      // console.log(data);
      const params = {
        id: data.id,
        isOnjob: data.isOnjob,
        userId: data.userId
      };
      this.postRequest(changestatus, params).then(res => {
        if (res.code == 200) {
          this.$message.success("更改员工状态成功");
          this.getadminList();
        }
      });
    },
    // 点击重置清空表单
    reset() {
      this.$refs.personRef.resetFields();
    },
    // 分页
    handleSizeChange(val) {
      this.adminQuery.pageSize = val;
      this.getadminList();
    },
    handleCurrentChange(val) {
      this.adminQuery.pageNumber = val;
      this.getadminList();
    },
    getserach() {
      this.adminQuery.pageNumber = 1;
      this.getadminList();
    },
    // 点击确定按钮 添加或者编辑
    sureAdd() {
      this.$refs.personRef.validate(valid => {
        if (!valid) return this.$message.error("请填写完整");
        if (this.personName == "添加员工") {
          this.handlerAddJob();
        } else if (this.personName == "编辑员工") {
          this.handlerEditJob();
        }
      });
    },

    // 封装一个添加的方法
    handlerAddJob() {
      const params = {
        userId: this.PersonForm.userId,
        phone: this.PersonForm.phone,
        roleId: this.PersonForm.roleId,
        isOnjob: this.PersonForm.isOnjob,
        dateOfEntry: this.PersonForm.dateOfEntry,
        petName: this.PersonForm.petName,
        companyId: this.org_id
      };
      this.postRequest(adminAdd, params).then(res => {
        if (res.code == 200) {
          this.$message.success("添加员工成功");
          this.getadminList();
          this.PersonJobdialogVisible = false;
        } else if (res.code == 400) {
          this.$message.error(res.msg);
        }
      });
    },
    // 封装一个编辑的方法
    handlerEditJob() {
      const params = {
        userId: this.PersonForm.userId,
        phone: this.PersonForm.phone,
        roleId:
          this.PersonForm.roleId == "公司超级管理员"
            ? 2
            : this.PersonForm.roleId,
        isOnjob: this.PersonForm.isOnjob,
        dateOfEntry: this.PersonForm.dateOfEntry,
        petName: this.PersonForm.petName,
        id: this.PersonForm.id,
        user_id: this.PersonForm.user_id,
        companyId: this.org_id
      };
      this.postRequest(adminUpdate, params).then(res => {
        if (res.code == 200) {
          this.$message.success("修改员工成功");
          this.getadminList();
          this.PersonJobdialogVisible = false;
        }
      });
    },
    //   添加员工的弹框
    handlerAdd() {
      this.personName = "添加员工";
      this.personDisabled = false;
      this.PersonJobdialogVisible = true;
      this.showMessage = true;
      this.getroleSel();
    },
    //编辑员工的弹框
    handlerEdit(data) {
      this.PersonJobdialogVisible = true;
      this.$nextTick(() => {
        this.getroleSel();
        this.personName = "编辑员工";
        this.personDisabled = false;
        this.showMessage = false;
        this.PersonForm.petName = data.petName;
        this.PersonForm.phone = data.phone;
        this.PersonForm.roleId = data.roleId == 2 ? data.name : data.roleId;
        if (data.isOnjob == false) {
          this.PersonForm.isOnjob = 2;
        } else if (data.isOnjob == true) {
          this.PersonForm.isOnjob = 1;
        }
        this.PersonForm.dateOfEntry = data.dateOfEntry;
        this.PersonForm.id = data.id;
        this.PersonForm.userId = data.userId;
      });
    },
    //查看员工的弹框
    handlerShow(data) {
      this.personName = "查看员工";
      this.PersonJobdialogVisible = true;
      this.personDisabled = true;
      this.PersonForm.petName = data.petName;
      this.PersonForm.phone = data.phone;
      this.PersonForm.roleId = data.name;
      this.PersonForm.isOnjob = data.isOnjob == false ? "离职" : "在职";
      this.PersonForm.dateOfEntry = data.dateOfEntry;
    },
    // 删除员工
    handlerDel(data) {
      const params = {
        userId: this.PersonForm.userId,
        id: data.id,
        user_id: data.userId
      };
      this.$confirm("此您确定删除工作人员吗?, 是否继续?", "提示", {
        confirmButtonText: "确定",
        cancelButtonText: "取消",
        type: "warning"
      })
        .then(() => {
          this.postRequest(adminDel, params).then(res => {
            if (res.code == 200) {
              this.$message({
                type: "success",
                message: "删除成功!"
              });
              this.getadminList();
            }
          });
        })
        .catch(() => {
          this.$message({
            type: "info",
            message: "已取消删除"
          });
        });
    },
    // 关闭弹框触发的事件
    handleClose() {
      this.$refs.personRef.resetFields();
      this.PersonJobdialogVisible = false;
    }
    // // 获取公司的无分页列表
    // getcompanySel() {
    //   this.postRequest(companySel).then(res => {
    //     if (res.code == 200) {
    //       this.companySelList = res.data;
    //     }
    //   });
    // },
    // // 拿到公司的id
    // handlercompanyId(val) {
    //   this.ruleForm.companyId = val;
    // }
  }
};
</script>

<style lang="less" scoped>
.PersonJob {
  padding: 20px;

  //   搜索框
  .PersonJob_serach {
    margin-top: 20px;
    padding: 10px;
    border: 1px solid #eaedf3;
    .demo-form-inline {
      margin-top: 15px;
    }
  }
  //   表格
  .tablebtn {
    cursor: pointer;
  }
}
</style>
